import React, { Component } from 'react';
import { get } from 'utils/http'
import { CalendarWrap } from './styledIndex'
import hhh from 'assets/images/hhh.png'
import cityicon from 'assets/images/cityicon.png'
import BScroll from 'better-scroll'

class Calendar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            scrollList: [],  // 上面的可拖动列表
            dateList: [],    // 下面的日期查询  
            Bscroll: [],
            currentDay: '',
            currentMonth: '',
            currentYear: '',
            weekList: [
                {name: '一',className: ''},
                {name: '二',className: ''},
                {name: '三',className: ''},
                {name: '四',className: ''},
                {name: '五',className: ''},
                {name: '六',className: ''},
                {name: '日',className: ''},
            ],
            dayList: [],
            days: ''
        }

        this.initCalendar = this.initCalendar.bind(this)
        this.renderHeader = this.renderHeader.bind(this)
        this.renderBody = this.renderBody.bind(this)
        this.preMonth = this.preMonth.bind(this)
        this.nextMonth = this.nextMonth.bind(this)
        this.handleClick = this.handleClick.bind(this)
    }
    

    async componentDidMount() {

        this.initCalendar()

        let scrollResult = await get({
            url: '/api/Show/Index/getShowCategoryList?version=6.0.9&referer=2'
        })

        let dateResult = await get({
            url: `/api/Show/Search/getShowList?category=0&city_id=3&start_time=${this.state.currentYear}%2F12%2F${this.state.days}&version=6.0.9&referer=2`
        })
        
        const wrapper = document.querySelector('.left')
        const swiper = document.querySelector('.calendar-wrap')
        const scroll = new BScroll(wrapper, {
            scrollX: true,
            click: true,
            scrollY: false,
        })
        const scrollDate = new BScroll(swiper, {
            scrollX: false,
            click: true,
            scrollY: true,
        })

        this.setState({
            scrollList: scrollResult.data,
            Bscroll: scroll,
            dateList: dateResult.data.list
        })
    }

    // 获取当前date的当月第一天的字符串形式
    getMonthFirstDate(date) {
        let nowYear = date.getFullYear()    //获取年份
        let nowMonth = date.getMonth() + 1  //获取月份
        return ` ${nowYear}-${nowMonth}-01 `
    }

    // 获取当前data的字符串形式
    getDateString(date) {
        let nowYear = date.getFullYear()   // 获取年份
        let nowMonth = date.getMonth() + 1 // 获取月份
        let day = date.getDate()
        day = day < 10 ? '0' + day : day
        return `${nowYear}-${nowMonth}-${day}`
    }

    // 上个月
    preMonth() {
        let date = new Date(`${this.state.currentYear}-${this.state.currentMonth}-${this.state.currentDay}`)
        let preMonthFirstDate = new Date(this.getMonthFirstDate(new Date(date.setDate(0))))  // 0是上个月的最后一天
        this.initCalendar(preMonthFirstDate)
    }

    // 下个月
    nextMonth() {
        let date = new Date(`${this.state.currentYear}-${this.state.currentMonth}-${this.state.currentDay}`)
        let preMonthFirstDate = new Date(this.getMonthFirstDate(new Date(date.setDate(33))))  // 0是上个月的最高后一天
        this.initCalendar(preMonthFirstDate)
    }

    // 初始化日历
    initCalendar(currentDay) {
        let nowDate = currentDay ? currentDay: new Date()
        let nowMonthFirstDay = this.getMonthFirstDate(nowDate)  // 获取当前1号日期
        let nowWeek = new Date(nowMonthFirstDay).getDay() ? new Date(nowMonthFirstDay).getDay() : 7  // 获取星期
        let newDateList = []  // 创建日期数组
        let startDay = 2 - nowWeek;  // 开始日期的下标  以为setDate(0)是上个月最后一天 所以是2-数字前面加0.0
        let showDayLength = nowWeek < 6 ? 35 : 42  // 如果5行能显示下一个月，就只显示5行，否则显示6行
        // 循环处理 获取日历上应该显示的日期
        for(let i = startDay; i < startDay + showDayLength; i++) {
            let date = new Date(new Date(nowMonthFirstDay).setDate(i))  // 获取时间对象
            let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()  // 小于9的数字前面加0.0
            let dayObject = {
                date: this.getDateString(date),
                day,
                className: ''
            }
            // new Date(str).toDateString() === new Date().toDateString()
            if(date.toDateString() === new Date().toDateString()) {
                dayObject.className = 'today'
            }
            newDateList.push(dayObject)
        }
        this.setState((pre) => {
            return {
                dayList: newDateList,
                currentDay: nowDate.getDate(),
                currentMonth: nowDate.getMonth() + 1>= 10 ? nowDate.getMonth() + 1 : '0' + (nowDate.getMonth() + 1),
                currentYear: nowDate.getFullYear()
            }
        })
    }

    renderHeader() {
        return (
            <div className="calendar-header">
                <li>
                    <span onClick = {this.preMonth}>></span>
                </li>
                <li className="">
                    {this.state.currentYear}年{this.state.currentMonth}月
                </li>
                <li>
                    <span onClick = {this.nextMonth}>></span>
                </li>
            </div>
        )
    }

    renderBody() {
        return (
            <div className="calendar-body">
                <div className="week-container">
                    {
                        this.state.weekList.map( week => {
                            return <div key={week.name} className = {`week${week.className}`}>{week.name}</div>
                        })
                    }
                </div>
                <div className="day-container">
                    {
                        this.state.dayList.map( (dayObject,index) => {
                            return <div key={index} className={`day${dayObject.className}`} onClick={this.handleClick}>{dayObject.day}</div>
                        } )
                    }
                </div>
            </div>
        )
    }

    handleClick(e) {
        this.setState({
            days: Number(e.target.innerHTML)
        },()=> {
            console.log(this.state.days)
        })
        
        
    }

    render() {
        return (
            <CalendarWrap>
                <header>
                    <i>></i>
                    <span>演出日历</span>
                    <div className="title_nav-wrapper ">
                        <div className="title_nav">
                            <img src={hhh} alt="" />
                        </div>
                    </div>
                </header>
                <div className="middle">
                    <div className="left">
                        <ul>
                            <li>全国</li>
                            {
                                this.state.scrollList.length && (
                                    this.state.scrollList.map((v,i) => (
                                        <li id={v.id} key={i}>{v.name}</li>
                                    ))
                                )
                            }
                        </ul>
                    </div>
                    <div className="right">
                        <span>广州</span>
                        <span><img src={cityicon} alt=""/></span>
                    </div>
                </div>
                <div className="calendar-wrap">
                    <div className="content">
                        <div className="calendar_com">
                            {this.renderHeader()}
                            {this.renderBody()}
                        </div>  
                        <div className="recommend-wrap">
                            {
                                this.state.dateList.length && (
                                    this.state.dateList.map( (value,index) => (
                                        <div key={index} className="hhh">
                                            <img src={value.pic} alt=""/>
                                            <div className="jjj">
                                                <div>{value.start_show_time.substring(0,4)}&nbsp;{value.show_time_top}&nbsp;{value.show_time_bottom}</div>
                                                <div>{value.name}</div>
                                                <div>{value.city_name}&nbsp;|&nbsp;{value.venue_name}</div>
                                                <div>
                                                    {
                                                        value.support_desc.length && (
                                                            value.support_desc.map((item,index) => (
                                                                <span key={index}>{item}</span>
                                                            ))
                                                        )
                                                    }
                                                </div>
                                                <div>￥{value.min_price}&nbsp;<span>起</span></div>
                                            </div>
                                        </div>
                                    ) )
                                )
                            }
                        </div>
                    </div>
                </div>
            </CalendarWrap>
        );
    }
}

export default Calendar;